<template>
    <div>
        <div class="top">
            <van-sticky>
                    <van-search shape="round"  background="linear-gradient(to top, #ff9000, #ff5000)" v-model="value" placeholder="请输入搜索关键词" />
            </van-sticky>
        </div>
        <div class="types">
            <van-sidebar v-model="activeKey">
                <van-sidebar-item
                    @click="changeType"
                    v-for="type in types"
                    :key="type.id"
                    :title="type.name"
                />
            </van-sidebar>
        </div>
        <div class="products">
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
            >
                <div class="product" v-for="product in pros" :key="product.id">
                    <img :src="product.banner" alt="" />
                    <p class="name">{{ product.name }}</p>
                    <p class="price">￥{{ product.price }}</p>
                    <van-button color="linear-gradient(to right, #ff9000, #ff5000)" round @click="addcart(product)">加入购物车</van-button>
                </div>
            </van-list>
        </div>
        <div class="float">
            <van-icon name="cart-circle" @click="tocart()" size="40" color="#ff9000"/>
        </div>
        <div class="totop">
            <a href="#top">
            <van-icon name="upgrade" size="40" color="#ff9000"/>
            </a>
        </div>
    </div>
</template>

<script>
import Vue from "vue";
import { Search } from "vant";
import { Sidebar, SidebarItem } from "vant";
import { getTypes, getPro, addCart} from "@/request/index";
import { List } from "vant";
import { Button } from "vant";
import { Sticky } from 'vant';
import {getCookie} from '../../utils/cookie'
import { Toast } from 'vant';
import { Icon } from 'vant';

Vue.use(Icon);
Vue.use(Toast);
Vue.use(Sticky);
Vue.use(Button);
Vue.use(List);
Vue.use(Sidebar);
Vue.use(SidebarItem);
Vue.use(Search);

export default {
    data() {
        return {
            value: "",
            activeKey: 0,
            types: [],
            pros: [],
            list: [],
            loading: false,
            finished: false,
            page: 1,
            typename:'',
        };
    },
    created() {
        this.typename = this.$route.query.typename||'全部'
        this.request();
    },
    methods: {
        async request() {
            var types = await getTypes();
            // var pros=await getPro()
            types.unshift({
                id: +new Date(),
                name: "全部",
            });
            // console.log(types);
            this.types = types;
            // this.pros=pros;
            var index = this.types.findIndex(item => item.name === 
            this.typename)
            this.activeKey = index
        },
        onLoad() {
            this.getProducts()
        },
        getProducts(){
            getPro(this.typename).then((data) => {
                var pros = data.slice((this.page - 1) * 5, this.page * 5);
                if (pros.length < 5) {
                    this.finished = true;
                } else {
                    this.page++;
                }
                this.loading = false;
                this.pros = this.pros.concat(pros);
            });
        },
        changeType(index) {
            this.typename = this.types[index].name;
            // getPro(this.typename).then((data) => {
            //     this.pros = data;
            //  });
            this.page=1
            this.pros=[]
            this.finished=false
            this.getProducts()
        },
        addcart(product){
            var _this=this
            var username = getCookie('username')
            if(!username){
                Toast.fail({
                    message:'请先登录！',
                    onClose(){
                        window.localStorage.setItem('url','/types')
                        _this.$router.push('/my/login')
                    }
                });
                return
            }
            product.username = username
            product.number = 1
            if(product.id){
                product.pid = product.id
                delete product.id
            }
            addCart(product).then(data=>{
                Toast.success(data.msg)
            })
        },
        tocart() {
            this.$router.push('/cart')
        }
    },
};
</script>

<style scoped>
.top{
    height: 54px;
}
.van-search{
    width: 400px;
}
.types {
    float: left;
    position: fixed;
}
.name{
    font-family: STXihei;
}
.products {
    float: right;
    margin: 0 10px 50px 0;
}
.product {
    width: 280px;
    border: 1px solid rgb(241, 176, 141);
    border-radius: 10px;
    padding: 10px;
}
.product img {
    width: 100%;
    border-radius: 10px;
}
.product .price {
    text-align: left;
    font-size: 20px;
    font-weight: bold;
    color: rgb(238, 76, 76);
    font-family: STXihei;
}
.product .van-button {
    width: 100%;
    font-size: 18px;
}
.product .proname {
    line-height: 28px;
}
.product p{
    text-align: center;
}
.float .van-icon{
    position: fixed;
    right: 20px;
    top: 600px;
}
.totop{
    position: fixed;
    right: 20px;
    top: 550px;
}
</style>